<template>
	<view class="content">
		<view class="code-box">
			<view class="flex-align-center" v-if="type=='order'">
				<img class="head-img" :src="item.logo" alt="">
				<text class="club-title">{{item.enterpriseName}}</text>
			</view>
			<view class="" v-if="type=='vip'">
				<img class="vip-log" src="../../../static/img/img/vip-log.png" alt="">
			</view>
			<view class="huodong-name">
				{{item.gameName || item.memberName || item.siteName || item.ticketName || item.name }}</view>
			<view class=" class-con">
				<view class="class-b">
					<view class="title">订单类型</view>
					<view class="type">{{item.type.value}}</view>
				</view>
				<view class="class-b class-time">
					<view class="title">时间</view>
					<view class="type">{{item.date}} </view>
					<view class="type">{{item.time}}</view>
				</view>
				<view class="class-b class-time">
					<view class="title">费用</view>
					<view class="type">¥{{item.price}}</view>
				</view>
			</view>
			<view class="">
				<text class="title">地址</text>
				<view class="address flex-align-center">
					<img class="fx-dingwei" src="../../../static/img/img/fx-dingwei.png" alt="">
					<text>{{item.address}}</text>
				</view>
			</view>
			<view>
				<view class="yanpiao">{{type=='order'?'待验票':'使用码'}}</view>
				<image class="qr-code" :src="data.code"></image>
			</view>

		</view>
		<img @click="close" class="off" src="../../../static/img/img/off.png" alt="">

	</view>
</template>

<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		defineEmits,
		defineProps,
		ref
	} from "vue";
	import {
		getQrCode,
		echoDetail
	} from '../../requestApi/api.js';
	const emit = defineEmits(['close']);
	const props = defineProps(['type', 'item']); // 订单使用 order 会员使用 vip
	const data = ref({
		code: ''
	})
	onMounted(() => {
		props.item.date = getDate(props.item.createTime);
		props.item.time = getTime(props.item.createTime);
		getQRCode();
		uni.hideTabBar();

	})
	onBeforeUnmount(() => {
		uni.showTabBar();
	})
	//获取二维码
	const getQRCode = () => {
		if (props.type == 'myVip') {
			//我的会员卡
			echoDetail({
				id: props.item.id
			}).then(res => {
				data.value.code = res.data.qrCode;
			})
		} else {
			//订单里面的各种码
			getQrCode({
				id: props.item.id
			}).then(res => {
				data.value.code = res.data;
			})
		}
		

	};
	//转换时间
	const getDate = (time) => {
		let date = new Date(time);
		let year = date.getFullYear();
		let moon = date.getMonth() + 1;
		let day = date.getDate();
		return year + '-' + moon + '-' + day;
	};
	const getTime = (time) => {
		let date = new Date(time);
		let h = date.getHours();
		let m = date.getMinutes();
		let s = date.getSeconds();
		return h + ':' + m + ':' + s;
	};
	//关闭
	function close() {
		emit('close')
	}
</script>

<style lang="scss">
	.content {
		position: fixed;
		background-color: rgba(0, 0, 0, .5);
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		height: 100vh;
		z-index: 99;

		.code-box {
			background-color: #fff;
			height: 926rpx;
			width: 100%;
			padding: 62rpx 40rpx 0;

			.vip-log {
				width: 78rpx;
				height: 33rpx;
			}

			.head-img {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.club-title {
				font-size: 24rpx;
				font-weight: bold;
				color: #2C2C2C;
			}

			.huodong-name {
				margin-top: 8rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #2C2C2C;
				margin-bottom: 48rpx;
			}

			.title {
				font-size: 20rpx;
				color: #A5A5A5;
				margin-bottom: 10rpx;

			}

			.class-con {

				display: flex;
				justify-content: space-around;
				margin-bottom: 16rpx;
			}

			.class-b {
				flex: 1;
				display: flex;
				flex-direction: column;


				.type {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}
			}

			.class-time {
				align-items: center;
			}

			.address {
				margin-top: 16rpx;
				margin-bottom: 110rpx;

				.fx-dingwei {
					width: 20rpx;
					height: 20rpx;
					margin-right: 22rpx;
				}

				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
				}
			}

			.yanpiao {
				font-size: 36rpx;
				font-weight: bold;
				color: #2C2C2C;
				margin-bottom: 30rpx;
			}

			.qr-code {
				width: 250rpx;
				height: 250rpx;
				// background-color: #2C2C2C;
				margin-left: 50%;
				transform: translateX(-50%);
			}

		}

		.off {
			width: 90rpx;
			height: 90rpx;
			margin-top: 36rpx;
		}
	}
</style>